<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Linear Gradient Ripple</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- SVG Sprite -->
    <div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">
        <defs>
          <linearGradient id="gradient" gradientTransform="rotate(0)">
            <stop offset="0" stop-color="#0868BB"/>
            <stop offset="0.15" stop-color="#0075D8"/>
            <stop offset="0.2" stop-color="#0868BB"/>
            <stop offset="0.25" stop-color="#0075D8"/>
            <stop offset="0.3" stop-color="#0868BB"/>
            <stop offset="0.35" stop-color="#0075D8"/>
            <stop offset="0.4" stop-color="#0868BB"/>
            <stop offset="0.45" stop-color="#0075D8"/>
            <stop offset="0.5" stop-color="#0868BB"/>
            <stop offset="0.6" stop-color="#0075D8"/>
            <stop offset="0.65" stop-color="#0868BB"/>
            <stop offset="0.7" stop-color="#0075D8"/>
            <stop offset="0.75" stop-color="#0868BB"/>
            <stop offset="0.8" stop-color="#0075D8"/>
            <stop offset="0.85" stop-color="#0868BB"/>
            <stop offset="0.9" stop-color="#0075D8"/>
            <stop offset="0.95" stop-color="#0868BB"/>
            <stop offset="1" stop-color="#0075D8"/>
          </linearGradient>
        </defs>
        <symbol id="ripply-scott" viewBox="0 0 120 120">
          <rect width="5" height="5" fill="url(#gradient)"/>
        </symbol>
      </svg>
    </div>
    <!-- /end sprite -->

    <div class="container">

      <header class="codrops-header">
        <h1>SVG Ripples</h1>
        <nav class="codrops-demos">
          <a href="index.html">circle</a>
          <a href="radial-gradient.html">circle+radialGradient</a>
          <a href="polygon.html">polygon</a>
          <a class="current-demo" href="linear-gradient.html">rect+linearGradient</a>
        </nav>
      </header>

      <!-- button component -->
      <button id="js-ripple-btn" class="button styl-material">
        Click for Ripple
        <svg class="ripple-obj" id="js-ripple">
          <use height="100" width="100" xlink:href="#ripply-scott" class="js-ripple"></use>
        </svg>
      </button>
      <!-- /end button component -->
    </div>
    <!-- /container -->

    <!-- GreenSock Power : Required for Demo -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
    <script src="js/ripple-config.js"></script>
  </body>
</html>
